<template>
  <div class="mall">
    <div class="mall-sidebar">
      <van-sidebar v-model="sidebarkey">
      <van-sidebar-item
        v-for="tab in list"
        :key="`list-${tab.id}`"
        :to="`/mall/${tab.id}`"
        :title="tab.name"
      />
    </van-sidebar>
    </div>
    <div class="mall-main">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  data () {
    return {
      sidebarkey: 0,
      list: []
    }
  },
  name: 'Mall',
  components: {
  },
  created () {
    // console.log(this.route)
    this.$http.getTabs()
      .then(resp => {
        // console.log(resp)
        this.list = resp.list
        // 默认跳到第0条所对应的路由$
        // 但是如果当前其他组件刷新的时候就不跳转
        const { id } = this.$route.params
        if (id) {
          // 如果id已存在就不再刷新，但是需要改变 sidebarkey的值
          this.list.forEach((tab, index) => {
            if (tab.id === parseInt(id)) this.sidebarkey = index
          })
        } else {
          // 如果id不存在那说明是从其他的组件过来的，那就重定向
          this.$router.push(`/mall/${this.list[0].id}`)
        }
      })
  },
  beforeRouteUpdate (to, form, next) {
    // console.log({ to, form })
    // 如果取的组件是mall就不跳转
    if (to.name !== 'Mall') {
      next()
    }
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
.mall{
  display: flex;
  height: 100%;
  &-sidebar{
    overflow-x: hidden;
    .van-sidebar-item--select::before{
      background-color: #FFD000;
    }
  }
  &-main{
    flex: 1;
  }
  &-main{
    overflow-x: hidden;
  }
}
.mall-main{
  background-color:#f7f7efeb;
}
</style>
